<!-- 接货时间组件 -->
<template>
  <nut-popup class="phoneBox" position="bottom" round :style="{ height: '50%' }" v-model:visible="props.showRound">
    <nut-date-picker
      v-model="currentDate"
      :title="props.timeType == 0 ? '选择开始时间' : '选择结束时间'"
      type="datetime"
      :min-date="minDate"
      :max-date="maxDate"
      @cancel="closeTimeModel"
      @confirm="confirm"
    ></nut-date-picker>
  </nut-popup>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
import dayjs from 'dayjs'

const props = defineProps<{
  showRound: boolean
  timeType: number // 选择接货开始还是接货结束 0 1
  startTime: string // 开始时间
  endTime: string // 结束时间
}>()

const emit = defineEmits(['sendReceiveTimeMsg'])

/* 配送时间段来个默认开始时间和结束时间（开始时间当前时间，结束时间当前时间加3小时，时间校验规则，开始时间不能比当前时间早，结束时间要比开始时间大3个小时） */



watch(
  () => props.timeType,
  (newVal) => {
    if (newVal == 0) {
      const replacedString = props.startTime.replace(' ', 'T')
      currentDate.value = new Date(replacedString)
    }else if(newVal == 1){
      const replacedString = props.endTime.replace(' ', 'T')
      currentDate.value = new Date(replacedString)
    }
  },
  { deep: true }
)

/* 选择接货结束时间-年月时分秒 */
const currentDate = ref()
const minDate = new Date()
const maxDate = new Date(new Date().getFullYear() + 3, new Date().getMonth(), new Date().getDate());

// 关闭弹窗-确定
const confirm = ({ selectedValue, selectedOptions }) => {
  let date = selectedValue.slice(0, 3).join('-')
  let time = selectedValue.slice(3).join(':')
  Taro.showToast({
    title: date + ' ' + time,
    icon: 'none'
  })
  let sendData ;
  if(props.timeType == 0){
    sendData = {
      timeType: 0,
      startTime: date + ' ' + time,
    }
  }else {
    sendData = {
      timeType: 1,
      endTime: date + ' ' + time,
    }
  }
  emit('sendReceiveTimeMsg',sendData) // 关闭弹窗传递数据
}

// 关闭弹窗-取消
const closeTimeModel = () => {
  emit('sendReceiveTimeMsg', null) // 关闭弹窗不传递数据
}
</script>

<style lang="scss">
.receiveBox {
  .nut-cell__title {
    color: #000;
  }
  .title {
    font-weight: bold;
  }

  .active {
    color: #000;
    background: #fff;
  }

  .nut-tabs__titles .nut-tabs__list {
    height: auto;
  }

  .nut-tabs.vertical .nut-tabs__titles.scrollable .nut-tabs__titles-item {
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    /* 垂直方向排列 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
  }

  .nut-tabs.vertical .nut-tabs__titles.scroll-vertical {
    width: 250rpx;
  }

  .nut-tabs.vertical .nut-tabs__content .nut-tab-pane {
    text-align: center;
    margin: 0 auto;
  }

  .nut-radio__label {
    text-align: center;
  }

  .nut-radio-group {
    padding: 20rpx;
  }

  .nut-radio-group .nut-radio {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
  }

  .btn {
    width: 702rpx;
    height: 88rpx;
    border-radius: 200rpx;
    background: #0966ff;
    color: #fff;
  }
}
</style>
